<template>
	<view class="box" :style="{'padding-top':systemHeight+28.5+'px'}">
		<view class="head">
			<image class="back" src="/static/img/back.png" @click="back()"></image>
			<view class="title">Payment</view>
			<view class="right"></view>
		</view>
		<view class="small_title">Select a payment method</view>
		<view class="select_pay">
			<view class="pay_left">
				<image class="img" src="/static/img/dollar.png"></image>
				<view class="pay_text">Cash</view>
			</view>
			<image class="agre" src="/static/img/select.png" v-if="payMent=='0'"></image>
			<image class="agre" src="/static/img/unselect.png" v-else @click="payMent='0'"></image>
		</view>

		<view class="select_pay_card">
			<view class="pay_left">
				<image class="img" src="/static/img/dollar.png"></image>
				<view class="pay_text">Card</view>
			</view>
			<view class="pays">
				<view class="pays_left">
					<image class="pays_img" src="/static/img/visa.png"></image>
					<view>
						<view class="pays_name">Visa</view>
						<view class="pays_text">4392268888888888</view>
					</view>
				</view>
				<image class="agre" src="/static/img/select.png" v-if="payMent=='1'"></image>
				<image class="agre" src="/static/img/unselect.png" v-else @click="payMent='1'"></image>
			</view>
			<view class="pays" @click="card('2')">
				<view class="pays_left">
					<image class="pays_img" src="/static/img/visa.png"></image>
					<view>
						<view>Visa</view>
						<view class="pays_text">4392268888888888</view>
					</view>
				</view>
				<image class="agre" src="/static/img/select.png" v-if="payMent=='2'"></image>
				<image class="agre" src="/static/img/unselect.png" v-else @click="payMent='2'"></image>
			</view>
			<view class="pays" @click="card('1')">
				<view class="pays_left">
					<image class="pays_img" src="/static/img/payX.png"></image>
					<view>
						<view>Visa</view>
						<view class="pays_text">Add Mastercard</view>
					</view>
				</view>
				<image class="agre" src="/static/img/select.png" v-if="payMent=='3'"></image>
				<image class="agre" src="/static/img/unselect.png" v-else @click="payMent='3'"></image>
			</view>
		</view>
		<view class="save">Save</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				systemHeight: null,
				//支付方式 :0代表默认是cash
				payMent: '0',
			}
		},
		created() {
			this.systemHeight = uni.getSystemInfoSync().statusBarHeight
		},
		methods: {
			//1是加卡，2解绑
			card(type) {
				uni.navigateTo({
					url: `/pages/pay/card?type=${type}`
				})
			},
			back(){
				uni.navigateBack()
			}
		}
	}
</script>

<style>
	.box {
		position: fixed;
		width: 100%;
		height: 100vh;
	}

	.head {
		width: 92%;
		margin: 00rpx auto 62rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.back {
		width: 20rpx;
		height: 36rpx;
	}

	.title {
		font-family: Mont;
		font-weight: bold;
		font-size: 32rpx;
	}

	.right {
		width: 20rpx;
	}

	.small_title {
		width: 92%;
		margin: 0rpx auto 35rpx;
		font-family: Mont;
		font-weight: 600;
		font-size: 28rpx;
	}

	.select_pay {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 92%;
		margin: 0rpx auto 41rpx;
	}

	.pay_left {
		display: flex;
		align-items: center;
	}

	.img {
		width: 50rpx;
		height: 50rpx;
		margin-right: 28rpx;
	}

	.agre {
		width: 40rpx;
		height: 40rpx;
	}
	.select_pay_card{
		width: 92%;
		margin: 0rpx auto 41rpx;
	}
	.pays {
		margin: 30rpx 0rpx 50rpx 44rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.pays_left {
		display: flex;
		align-items: center;
		
		font-family: Mont;
		font-weight: bold;
		font-size: 28rpx;
		color: #000000;
	}

	.pays_img {
		width: 50rpx;
		height: 50rpx;
		margin-right: 25rpx;
	}

	.pays_name {
		font-family: Mont;
		font-weight: bold;
		font-size: 28rpx;
	}
	.pays_text{
		font-family: Mont;
		font-weight: 500;
		font-size: 24rpx;
		color: #6B6B6B;
	}
	.pay_text {
		font-family: Mont;
		font-weight: bold;
		font-size: 28rpx;
		color: #000000;
	}

	.save {
		position: absolute;
		bottom: 190rpx;
		left: 50%;
		transform: translate(-50%, 0);
		width: 690rpx;
		height: 92rpx;
		background: #34BA78;
		border-radius: 46rpx;
		font-family: Mont;
		font-weight: bold;
		font-size: 30rpx;
		color: #FFFFFF;
		line-height: 92rpx;
		text-align: center;
	}
</style>